<template>
    <div class="login_part">
        <el-form :model="data" :rules="rules" ref="form">
            <h2>用户登录</h2>
            <el-form-item prop="username">
                <el-input placeholder="用户名" v-model="data.username"></el-input>
            </el-form-item>
            <el-form-item class="password" prop="password">
                <el-input placeholder="密码" v-model="data.password"></el-input>
            </el-form-item>
            <el-form-item class="checkbox">
                <el-checkbox v-model="checked">记住密码</el-checkbox>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="login">登录</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<style lang="scss" scoped>
    .login_part {
       width: 100%;
       height: 100%;
       padding-top: 10%;
       .el-form {
           width: 350px;
           margin: 0 auto;
           border-radius: 8px;
           box-shadow: 0px 0px 9px #ccc;
           background-color: #fff;
           padding: 20px 40px;
           h2 {
               margin-bottom: 25px;
               text-align: center;
           }
            .possword {
               margin-bottom: 5px;
           }
           .checkbox {
               margin-bottom: 10px;
           }
           .el-button {
               width: 100%;
           }
       }
    }

</style>

<script>
import { username, password } from '@t'
export default {
    data() {
        return {
            checked: true,
            data: {},
            rules: {
                username:[{trigger: 'blur', required: true, validator: username}],
                password:[{trigger: 'blur', required: true, validator: password}],
            }
        }
    },
    methods: {
        login() {
            this.$refs.form.validate(vaild => {
                if(vaild) {
                    this.$store.dispatch('username', this.data)
                }
            })
        }
    },
    created() {
        console.log(this);
    }
    
}
</script>